<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Datum | CRM Admin Dashboard Template</title>
      
      <link rel="stylesheet" href="static/css/backend-plugin.min.css" th:href="@{/assets/css/backend-plugin.min.css}">
      <link rel="stylesheet" href="static/css/backend.css" th:href="@{/assets/css/backend.css}">  </head>
  <body class="  ">
    <!-- loader Start -->

    <!-- loader END -->
    <!-- Wrapper Start -->
    <div class="wrapper">
        <div th:replace="~{common/left-side-nav::left-side-nav}"></div>
        <div th:replace="~{common/top-nav::top-nav}"></div>
      <div class="content-page">

    <div class="container-fluid">
        <div class="row">
            
            <div class="col-lg-12">
                <div class="d-flex flex-wrap align-items-center justify-content-between my-schedule mb-4">
                   <div class="d-flex align-items-center justify-content-between">
                        <h4 class="font-weight-bold">用户列表查看</h4>
                    </div>  
                    <div class="create-workform">
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div class="modal-product-search d-flex">
                                <form class="mr-3 position-relative" th:action="@{/XiTongGuanLi/role_list}" method="get">
                                    <div class="form-group mb-0">
                                        <input name="pageSize" type="hidden" th:value="${page.pageSize}">
                                    <input type="text" class="form-control"  th:value="${param.keyword}" id="keyword" name="keyword" placeholder="搜索">
                                    <button type="submit" class="search-link" style="border: none;background-color: transparent;">
                                        <svg  class="" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                        </svg>
                                    </button>
                                    </div>
                                </form>
                                <a href="invoice-view.html" th:href="@{/XiTongGuanLi/role_add}" class="btn btn-primary position-relative d-flex align-items-center justify-content-between">
                                    <svg  class="mr-2" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                    </svg>
                                    添加用户
                                </a>
                            </div>
                        </div>
                    </div>                    
                </div>
                
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card card-block card-stretch">
                            <div class="card-body p-0">
                                <div class="d-flex justify-content-between align-items-center p-3">
                                    <h5 class="font-weight-bold">用户列表</h5>
                                    <button class="btn btn-secondary btn-sm">
                                        <svg  class="mr-1" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                        </svg>
                                        下载
                                    </button>
                                </div>
                                <div class="table-responsive">
                                    <div class="row mt-3">
                                        <div class="col-sm-6">
											<span class="align-middle">
												共<span th:text="${page.total}"></span>条，每页显示
												<select id="page-size-select" th:remove="all-but-first">
													<option
                                                            th:each="pageSize:${#numbers.sequence(5,30,5)}"
                                                            th:text="${pageSize}"
                                                            th:selected="${pageSize}==${page.pageSize}">

													</option>
													<option>5</option>
													<option>10</option>
													<option>15</option>
												</select>条数据
											</span>
                                        </div>

                                    <table class="table data-table mb-0">
                                        <thead class="table-color-heading">
                                        <tr class="text-light">

                                            <th scope="col">
                                                <label class="text-muted m-0">序号</label>
                                            </th>
                                            <th scope="col" class="dates">
                                                <label class="text-muted mb-0">用户名</label>
                                            </th>
                                            <th scope="col">
                                                <label class="text-muted mb-0">密码</label>
                                            </th>
                                            <th scope="col" class="text-right">
                                                <label class="text-muted mb-0">角色</label>
                                            </th>
                                            <th scope="col" class="text-right">
                                                <label class="text-muted mb-0">操作</label>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody th:each="role:${page.list}">
                                        <tr class="white-space-no-wrap">

                                            <td th:text="${roleStat.count}">
                                            </td>
                                            <td th:text="${role.username}"></td>
                                            <td th:text="${role.password}">

                                            </td>
                                            <td th:text="${role.role}" class="text-right">

                                            </td>

                                            <td>
                                                <div class="d-flex justify-content-end align-items-center">
                                                    <a th:href="@{/XiTongGuanLi/role_modify(id=${role.id},pageSize=${page.pageSize},pageNum=${page.pageNum},keyword=${param.keyword})}"
                                                       class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="View" href="order-details.html">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mx-4" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                                        </svg>
                                                    </a>
                                                    <a th:href="@{/XiTongGuanLi/role_remove(id=${role.id},pageSize=${page.pageSize},pageNum=${page.pageNum},keyword=${param.keyword})}" class="fas fa-trash-alt text-danger font-16 removeBtn" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit" href="#">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                                        </svg>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>


                                        </tbody>
                                    </table>
                                </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

      </div>
    </div>

    <div class="col-sm-6">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-end">
                <li th:class="${page.isFirstPage}?'page-item disabled':'page-item' ">
                    <a class="page-link" th:href="@{/XiTongGuanLi/role_list(pageNum=${page.pageNum}-1,pageSize=${page.pageSize},keyword=${param.keyword})}">上一页</a>
                </li>
                <li
                        th:class="${pageNum}==${page.pageNum}?'page-item active':'page-item'"
                        th:each="pageNum:${#numbers.sequence(1,page.pages,1)}">
                    <a class="page-link" th:text="${pageNum}"
                       th:href="@{/XiTongGuanLi/role_list(pageNum=${pageNum},pageSize=${page.pageSize},keyword=${param.keyword})}">1</a>
                </li>

                <li th:class="${page.isLastPage}?'page-item disabled':'page-item'">
                    <a class="page-link"
                       th:href="@{/XiTongGuanLi/role_list(pageNum=${page.pageNum}+1,pageSize=${page.pageSize},keyword=${param.keyword})}">下一页</a>
                </li>
            </ul>
        </nav>
    </div>
    <!-- Wrapper End-->

    <script src="static/js/backend-bundle.min.js" th:src="@{/assets/js/backend-bundle.min.js}"></script>
    <!-- Chart Custom JavaScript -->
    <script src="static/js/customizer.js" th:src="@{/assets/js/customizer.js}"></script>

    <script src="static/js/sidebar.js" th:src="@{/assets/js/sidebar.js}"></script>

    <!-- Flextree Javascript-->
    <script src="static/js/flex-tree.min.js" th:src="@{/assets/js/flex-tree.min.js}"></script>
    <script src="static/js/tree.js" th:src="@{/assets/js/tree.js}"></script>

    <!-- Table Treeview JavaScript -->
    <script src="static/js/table-treeview.js" th:src="@{/assets/js/table-treeview.js}"></script>

    <!-- SweetAlert JavaScript -->
    <script src="static/js/sweetalert.js" th:src="@{/assets/js/sweetalert.js}"></script>

    <!-- Vectoe Map JavaScript -->
    <script src="static/js/vector-map-custom.js" th:src="@{/assets/js/vector-map-custom.js}"></script>

    <!-- Chart Custom JavaScript -->
    <script src="static/js/chart-custom.js" th:src="@{/assets/js/chart-custom.js}"></script>
    <script src="static/js/01.js" th:src="@{/assets/js/01.js}"></script>
    <script src="static/js/02.js" th:src="@{/assets/js/02.js}"></script>

    <!-- slider JavaScript -->
    <script src="static/js/slider.js" th:src="@{/assets/js/slider.js}"></script>

    <!-- Emoji picker -->
    <script src="static/js/index.js" th:src="@{/assets/js/index.js}" type="module"></script>


    <!-- app JavaScript -->
    <script src="static/js/app.js" th:src="@{/asstes/js/app.js}"></script>
  <script>
      $('#page-size-select').change(function (event) {
          //通过this对象，获得到当前选择的值
          var pageSize=$(this).val();
          var keyword=$('#keyword').val()
          //向服务器发送请求
          window.location='/XiTongGuanLi/role_list?pageNum=1&pageSize='+pageSize+'&keyword='+keyword;

      })
      //删除用户信息
      $('.removeBtn').click(function (event) {


          //如果在<a>上的单机事件处理器函数返回false,就会禁用<a>默认行为

          return confirm('是否要删除信息?');
      })
  </script></body>
</html>